function ProductAction(pid, actionType) {
	// store the params used to issue ajax request
	var params = new Array();
	var values = new Array();

	// handle deletion
	if (actionType === "delete") {
		params.push("id=" + pid);
		params.push("action=" + actionType);
		AjaxRequest(values, params, actionType, pid);
		$("tr#tr_" + pid).remove();

	} else {
		// the name of the elements we need
		var elements = [ "name", "sku", "category", "price" ];

		var legalFlag = true;

		// traverse the elements list, just like for loop
		$(elements).each(function(index, val) {
			var key = val;
			var ele = key;
			// generate selector
			if (pid !== undefined && pid !== null)
				ele = "#" + actionType + "_" + val + "_" + pid;
			else
				ele = "#" + actionType + "_" + val;

			// select the dom element
			var element = $(ele);
			// get value of the dom element
			var value = element.val();

			if (value === undefined || value === null || value === "") {
				alert(val + " cannot be empty!");
				legalFlag = false;
			}
			// check if price is legal
			if (val === "price") {
				if (isNaN(parseFloat(value))) {
					alert("Illegal price!");
					legalFlag = false;
				} else {
					var price = parseFloat(value);
					if (price < 0) {
						alert("Price must be greater than 0!");
						legalFlag = false;
					}
				}
			}
			values[val] = value;
			// store param
			params.push(key + "=" + value);

		});
		if (!legalFlag) {
			return -1;
		}
		if (pid !== undefined && pid !== null)
			params.push("id=" + pid);

		params.push("action=" + actionType);

		// alert(values['name']);
		var result = AjaxRequest(values, params, actionType, pid);
		// alert("after ajax:");

	}
}

function AjaxRequest(values, params, actionType, pid) {
	$.ajax({
		type : 'POST',
		url : "AjaxProduct.jsp?" + params.join("&"),
		beforeSend : function() {
			// Update Stats
			$('#status').html('Request Sent');
		},
		success : function(result) {

			var response = $.parseJSON(result);

			console.log(response);
			console.log(actionType);
			switch (actionType) {
			case "insert":
				if (response["result"] === "succ") {
					var lastTR = $("table>tbody>tr").last().clone();
					$(lastTR).find(".clear_value").val("");

					// change the insert id into update id
					var elements = [ "name", "sku", "category", "price" ];
					// clear the add box
					$(elements)
							.each(
									function(index, val) {
										var key = val;
										var ele = key;
										// generate selector
										ele = "#" + actionType + "_" + val;

										// select the dom element
										$(ele).attr(
												"id",
												"update_" + key + "_"
														+ response["ID"]);
									});

					// change everything to convert an add row into an update
					// row
					var rID = response["ID"];
					$(".clear_value").removeClass("clear_value");
					$(".clear_value_select").removeClass("clear_value_select");

					$(".add_value_id").val(rID);
					$(".add_value_id").removeClass("add_value_id");

					$(".tr_add_id").attr("id", "tr_" + rID);
					$(".tr_add_id").removeClass("tr_add_id");

					$(".button_add_onclick_update").attr("onClick",
							"ProductAction(" + rID + ",'update')");
					$(".button_add_onclick_update").removeClass(
							"button_add_onclick_update");

					$(".button_add_onclick_delete").attr("onClick",
							"ProductAction(" + rID + ",'delete')");
					$(".button_add_onclick_delete").removeClass(
							"button_add_onclick_delete");

					$(".change_action_update").val("update");
					$(".change_action_update").removeClass(
							"change_action_update");

					$(".switch_off").attr("style", "display:none;");
					$(".switch_off").removeClass("switch_off");

					$(".switch_on").attr("style", "");
					$(".switch_on").removeClass("switch_on");

					$("table").append(lastTR);

					return true;
				} else {
					alert(response["Response"]);
					return false;
				}
				break;
			case "update":
				alert(response["Response"]);
				break;
			case "delete":
				// alert(response["Response"]);
				break;
			}
		},
		error : function() {
			// Failed request
			$('#status').html('Oops! Error.');
		}
	});
}